<template>
	<view>
		<Temp>
			<up-swiper :list="carouselList" keyName="imgUrl" />
			<view class="views">
				<!-- 业务项目 -->
				<home-title title="业务项目" type="project" />
				<view class="project box">
					<template v-for="item in projectList" :key="item.id">
						<view class="item" @click="routerPage(item, '/pages/project/project')">
							<image src="../../static/bagua2.png"></image>
							<view class="title">{{item.title}}</view>
						</view>
					</template>
				</view>
				<!-- 培训授徒 -->
				<!-- <home-title title="培训授徒" type="train" />
				<up-swiper :list="list1" style="height: 400rpx;" />
				<view class="train box">
					<ul>
						<template v-for="item in trainList" :key="item.id">
							<li>
								<text class="title">{{item.title}}</text>
								<text class="date">2024-11-21</text>
							</li>
						</template>
					</ul>
				</view> -->
				<!-- 大师简介 -->
				<home-title title="大师简介" type="introduce" />
				<view class="introduce box">
					<image class="img" :src="masterData.imgUrl" v-if="masterData.imgUrl"></image>
					<rich-text class="text" :nodes="masterData.content"></rich-text>
				</view>
				<!-- 风水案例 -->
				<home-title title="风水案例" type="example" />
				<view class="example box">
					<template v-for="item in exampleList" :key="item.id">
						<view class="item" @click="routerPage(item, '/pages/example/example')">
							<image :src="item.img" mode=""></image>
							<view class="title">{{item.dictLabel}}</view>
						</view>
					</template>
				</view>
			</view>
		</Temp>
	</view>
</template>

<script setup>
import Temp from "../../components/temp/temp.vue"
import HomeTitle from "../../components/homeTitle/homeTitle.vue"
import { ref, reactive, onMounted } from 'vue';
import { request } from '@/utils/request.js';  

// 轮播图
let carouselList = ref([]); 
// 业务项目
let projectList = ref([]); 
// 大师简介
let masterData = ref({})
// 风水案例
const exampleList = ref([]); 

// let trainList = ref([  
// 	{id: 1, title: "2024年三僚楊公風水研学班第四期暨杨公寿诞1190周年纪念活动庆典后开课"},
// 	{id: 2, title: "2024年三僚楊公風水研学班第四期暨杨公寿诞1190周年纪念活动庆典后开课"},
// 	{id: 3, title: "2024年三僚楊公風水研学班第四期暨杨公寿诞1190周年纪念活动庆典后开课"},
// 	{id: 4, title: "2024年三僚楊公風水研学班第四期暨杨公寿诞1190周年纪念活动庆典后开课"},
// 	{id: 5, title: "2024年三僚楊公風水研学班第四期暨杨公寿诞1190周年纪念活动庆典后开课"},
// 	{id: 6, title: "2024年三僚楊公風水研学班第四期暨杨公寿诞1190周年纪念活动庆典后开课"},
// ]); 


const routerPage = (item, path) => {
	uni.navigateTo({
		url: `${path}?id=${item.id}`
	})
}

const getCarouselList = () => {
	request({
	  url: '/system/dict/data/type/sys_carousel_list',
	  data: {}
	}).then(res => {
		let carouselArr = res.data.map(item => item.remark ? JSON.parse(item.remark) : '')
		carouselList.value = [...carouselArr.slice(0, 6)]
	})
}

const getProjectList = () => {
	request({
		url: "/system/dict/data/type/sys_bus_project_list",
		data: {},
	}).then(res => {
		let data = res.data.map(item => {
			return {
				id: item.dictCode,
				title: item.dictLabel
			}
		})
		projectList.value = [...data.slice(0, 6)]
	})
}

const getMasterList = () => {
	request({
	  url: '/system/dict/data/type/sys_master_data_list',
	  data: {}
	}).then(res => {
		if(res.data.length){
			masterData.value = {
				...res.data[0],
				content: res.data[0].remark ? JSON.parse(res.data[0].remark).htmlText : '',
				img: res.data[0].remark ? JSON.parse(res.data[0].remark).imgUrl : '',
			}
		}
	})
}

const getExampleList = () => {
	request({
	  url: '/system/dict/data/type/sys_case_list',
	  data: {}
	}).then(res => {
		if(res.data.length){
			res.data.forEach(item => {
				item.content = item.remark ? JSON.parse(item.remark).htmlText : ''
				item.img = item.remark ? JSON.parse(item.remark).imgUrl : ''
				item.id = item.dictCode,
				item.title = item.dictLabel
			})
			exampleList.value = [...res.data.slice(0, 6)]
		}
	})
}
	
onMounted(() => {
	getCarouselList()
	getProjectList()
	getMasterList()
	getExampleList()
})

</script>

<style lang="scss" scoped>
.views{
	margin-top: 20rpx;
	padding: 20rpx;
	color: $uni-text-color-orange;
	
	> .box{
		margin: 20rpx 0 40rpx;
	}
	
	> .project{
		display: flex;
		flex-wrap: wrap;
		gap: 20rpx;
		
		> .item{
			width: 48%;
			display: flex;
			align-items: center;
			margin-bottom: 20rpx;
			
			image{ 
				width: 40rpx;
				height: 40rpx;
				margin-right: 20rpx;
			}
		}
	}
	
	> .train{
		font-size: $uni-font-size-sm;
		
		ul{
			margin: 0;
			padding-inline-start: 0rpx;
			
			li{
				margin-top: 30rpx;
				display: flex;
				align-items: center;
				
				> .title{
					width: 75%;
					white-space: nowrap;       /* 不允许换行 */
					overflow: hidden;          /* 隐藏超出的内容 */
					text-overflow: ellipsis;   /* 超出部分显示省略号 */
				}
				
				> .date{
					margin-left: 30rpx;
				}
			}
		}
	}
	
	> .introduce{
		font-size: $uni-font-size-sm;
		
		image{
			width: 300rpx;
			height: 400rpx;
			margin-right: 20rpx;
			text-align: center;
		}
		
	}
	
	> .example{
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		
		> .item{
			width: 49%;
			margin-bottom: 40rpx;
			text-align: center;
			
			image{
				width: 300rpx;
				height: 400rpx;
				margin-bottom: 20rpx;
			}
			
			> .title{
				width: 95%;
				white-space: nowrap; 
				overflow: hidden;    
				text-overflow: ellipsis;
			}
		}
	}
}
</style>
